<!-- <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>使用js原生写法</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    div{
      width: 100%;
      height: 80px;
      margin-bottom: 10px;
      background-color: pink;
      display: none;
    }
  </style>
</head>
<body>
  <button id='btn1'>按钮1</button>
  <button id = 'btn2'>按钮2</button>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <script>
    var divs = document.querySelectorAll('div');
    var btn1 = document.getElementById('btn1');
    var btn2 = document.getElementById('btn2');
    console.log(btn1)
    
      btn1.onclick = function(){
        for(var i = 0; i <divs.length; i++){
          divs[i].style.display= 'block';
        }
      }
      btn2.onclick = function(){
        for(var i = 0; i <divs.length; i++){
        divs[i].innerText = '我是div中的内容'
      }
    }
  </script>
</body>
</html> -->

<!-- <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>使用jquery初体验</title>
  <style>
    div{
      width: 100%;
      height: 80px;
      margin-bottom:10px;
      background-color:pink;
      display: none;
    }
  </style>
</head>
<body>
  <button id="btn1">按钮1</button>
  <button id="btn2">按钮2</button>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <script src="jquery-1.12.4.js"></script>
  <script>
    //DOM写法的小缺点
    // 1.操作较为复杂，总是需要遍历
    // 2.容错性差
    // 3.制作简单的动画十分繁琐
    // 4.兼容性问题

    //以下是使用jquery的方法
    $('#btn1').click(function(){
      $('div').show(1000);
    });
    $('#btn2').click(function(){
      $('div').text('这是使用jquery设置的div内容')
    })
  </script>
</body>
</html> -->

<!-- <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>jquery使用时候的注意点</title>
</head>
<body>
  <div></div>
  
    1.使用jquery前必须先引入文件，在进行使用
     - 如果没有引入文件，出现报错 Uncaught ReferenceError: $ is not defined
    2.引用jquery文件的路径错误
     - 出现报错：错误1 资源加载错误 + 错误2 $ is not defined
  
  <script src="jquery-1.12.4.min.js"></script>
  <script>
    $('div')
  </script>
</body>
</html> -->

<!-- <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>jquery的入口函数</title>
</head>
<body>
  <script src="jquery-1.12.4.min.js"></script>
  <script>
    //DOM中的入口函数
    // - 代码执行时机：页面完全加载后执行（文件，图片，结构）
    window.onload = function(){
      console.log('这是DOM的入口函数');
    };
    //jQuery中的入口函数
    // - 两种入口函数的功能一致，推荐使用第二个，但要求都掌握
    // - 代码执行时机：页面的结构加载完毕后执行
    $(document).ready(function(){
      console.log('这是jQuery 的第一种入口函数');
    });
    $(function() {
      console.log('这是jQuery 的第二种入口函数');
    });
    //jQuery中同样可以使用类似window.onload的加载方式（今天了解）
    $(window).load(function() {
      console.log('jQuery中的完全加载执行1');
    });
    $(window).on('load',function() {
      console.log('jQuery中的完全加载执行2');
    });
  </script>
</body>
</html> -->

<!-- <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>jQuery中的顶级对象$</title>
</head>
<body>
  <div></div>
  <p></p>
  <script src="jquery-1.12.4.min.js"></script>
  <script>
    //BOM中的顶级对象window
    //DOM中的顶级对象document
    //1.jQuery中的顶级对象 存在两个名称：$ jQuery
    // - $ 和 jQuery具有相同的功能，代表同一个对象
    // - 通常为了简便，使用 $
    console.log($ === jQuery); // true
    $('div').text('这是div');
    jQuery('p').text('这是p标签');

    //2.jQuery中的顶级对象$的本质
    // - 通过观察$我们发现，$实际上是一个函数
    $('div').text('这是div');
    console.log($); //'function' 小注：控制台中 黑色字体的代表字符串

    //3.$函数的使用特点
    // - 选择器功能：传入了选择器字符串
    $('div');
    // - 入口函数功能：传入了一个函数体
    $(function() {});
    // - 可以将传入的DOM对象具备一些新的功能：传入了DOM对象
    $(document).ready(function() {});
  </script>
</body>
</html> -->

<!-- <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>DOM对象和jQuery对象的关系</title>
</head>
<body>
  <div id = 'box'></div>
  <div></div>
  <div></div>
  <script src="jquery-1.12.4.min.js"></script>
  <script>
    //1.基本概念：
    // - DOM对象：通过DOM方式获取的对象（标签），可以操作DOM的相关功能
    // - jQuery对象：通过jQuery方式获取的对象（标签），可以操作jQuery的相关功能

    //2.DOM对象和jQuery对象的关系
    // - 通过观察，jQuery对象是伪数组的结构，内部保存了一个或多个DOM对象
    // - 我们通常称jQuery对象是DOM对象的包装集
    var box = document.getElementById('box');
    console.dir(box);
    var $box = $('div');
    console.log($box);
  
    //3.DOM对象和jQuery对象的区别
    // - DOM对象只能使用DOM的功能，不能使用jQuery的功能
    // - jQuery对象只能使用jQuery的功能，不能使用DOM的功能
    $box.innerText = '这是jquery对象使用DOM对象的innerText的功能';//不能用
    box.text('这是DOM对象使用jQuery对象中的方法text的功能');//不能用

    //jQuery对象的使用特点：由于jq对象是伪数组，当设置jq功能时，jq会自动遍历内部的DOM对象并应用功能
    $('div').text('这是内容');

    //4.DOM对象和jQuery对象的转换方式
    // - 将DOM对象转换为jq对象：通过 $()包裹下
    var box = document.getElementById('box');
    $(box).text('这是DOM对象转jq对象后的操作');
    
    // - 将jq对象转换为DOM对象
    //  - 根据指定索引获取元素即可(因为使用jq获取到的元素本身就是DOM元素（标签）)
    //  - 通过jQuery中的get(),传入索引，通常可以获取DOM对象
    var $divs = $('div');
    $divs[1].innerText = '这是将jq对象转DOM对象后的操作';
    $divs.get(1).innerText = '这是使用jq对象中的get()方法转DOM对象后的操作';
  </script>
</body>
</html> -->

<!-- <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>jQuery两大特性 链式编程 隐式迭代</title>
  <style>
    #box{
      display: none;
      background-color: pink;
    }
  </style>
</head>
<body>
  <div id='box'>这是box</div>
  <script src="jquery-1.12.4.min.js"></script>
  <script>
    //jQuery操作的两大特点：
    // -链式编程
    //  - 任意的设置操作后，均可继续操作当前jQuery对象
    //  - 一旦执行了获取操作，链式编程就会结束
    var $box = $('#box');
    $box.show().text('这是内容').css('height',200);
    console.log($box.text())//获取box的文本内容
    $box.show().text().css('height',300);//报错
  </script>
</body>
</html> -->

<!-- <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>分析链式编程的实现方式</title>
  <style>
    #box{
      display: 'none';
      background-color: pink;
    }
  </style>
</head>
<body>
  <div id="box"></div>
  <script src="jquery-1.12.4.min.js"></script>
  <script>
    //分析链式编程实现的方式
    var obj = {
      name : 'jack',
      age : 18,
    }
    //获取操作
    obj.getName = function() {
      return this.name;
    }
    //设置操作
    obj.setName = function(name){
      this.name = name;
      //实现说明：
      //利用设置操作不需要返回值的特点，设置return this,可以实现链式编程
      return this;
    }
    //设置年龄
    obj.setAge = function(age) {
      this.age = age;
      // return this;
    }

    console.log(obj.getName());//'jack'
    obj.setName('rose');
    console.log(obj.getName());//'rose'

    obj.setName('zs').setAge(20);
    console.log(obj);
  </script>
</body>
</html> -->

<!-- <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>隐式迭代(偷偷的遍历)</title>
</head>
<body>
  <div id='box'style="width: 100px;">这是box</div>
  <div style="width: 200px;">这是div</div>
  <div style="width: 300px;">这是div</div>
  <script src="jquery-1.12.4.min.js"></script>
  <script>
    // - 隐式迭代(隐式->偷偷的 迭代->遍历 偷偷的遍历)
    //  - 任意的设置操作时都不需要遍历，jQuery会自动将操作应用与所有元素
    $('div').css('background-color','pink');

    //  - 不适用于隐式迭代的操作
    //   - 获取操作 第一种(可以获取到，但是不好用)
    console.log($('div').text());
    //   - 获取操作 第二种(无法完整获取，只能获取到第一个元素的对应样式)
    console.log($('#box').css('width'));
    console.log($('div').css('width')); 
  </script>
</body>
</html> -->

<!-- <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>手动遍历jQuery对象和each（）遍历方法的使用</title>
</head>
<body>
  <div id="box" style="width: 100px;">这是box</div>
  <div style="width: 200px;">这是div</div>
  <div style="width: 300px;">这是div</div>
  <script src="jquery-1.12.4.min.js"></script>
  <script>
    //手动遍历（显示迭代）
    var $divs = $('div');
    console.log($divs);
    for(var i = 0; i < $divs.length; i++){
      //获取每个元素（标签）的宽
      console.log($($divs[i]).css('width'));
    }
    //jQuery中提供了一个each()方法，用于进行手动遍历操作（相当于for循环遍历）
    $divs.each(function(index,element) {
      //element是DOM对象结构，如果希望使用jQuery功能，需要转换
      console.log(index,element);//index - 索引  element - 元素值
      console.log($(element).css('width'));
      //当前函数中，this和element是相同的，可以根据需求选择
      console.log($(this).css('width'));
    })
  </script>
</body>
</html> -->

<!-- <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>$each的使用 用于遍历数据</title>
</head>
<body>
  <script src="jquery-1.12.4.min.js"></script>
  <script>
    //jQuery中还提供了$.each(),用于对数据进行遍历
    // -好处： 统一了对数组和对象的遍历方式
    var arr = ['a','b','c'];
    var obj = {
        name: 'jack',
        age: 18,
    };
    //$.each() 参数1：要遍历的数据 参数2：对每个元素进行操作
    $.each(arr,function(index,element) {
      //index 代表索引，element代表元素值
      console.log(index,element);
      //this得到的数据形式基本包装类型的对象，不是我们需要的，不推荐使用
      console.log(this)
    });
    $.each(obj,function(key,value){
      console.log(key,value);;
      console.log(this)
    });
  </script>
</body>
</html> -->

<!-- <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>jQuery选择器 第一部分</title>
</head>
<body>
  <div id="box"></div>
  <div class="box"></div>
  <p class="box"></p>
  <div></div>
  <ul id="list">
    <li>
      <ul>
        <li></li>
        <li></li>
      </ul>
    </li>
    <li></li>
  </ul>
  <a href="" id='text'>
    <span></span>
    <span></span>
    <span></span>
  </a>
  <script src="jquery-1.12.4.min.js"></script>
  <script>
    //jQuery的选择器jQuery的最核心的功能
    //1.id选择器：标识符(#)
    $('#box').text('我是使用id选择器 选中的');
    //2.标签选择器：直接设置标签名
    $('div').text('使用标签选择器 选中的');
    //3.类选择器：标识符(.)
    $('.box').text('使用类选择器 选中类名为box');
    //4.交集选择器：
    $('div.box').text('使用交集选择器 选中类名为box的div标签 没有p标签');
    //5.并集选择器：
    $('div.box,p').text('使用并集选择器 选中的类名是box的div标签 和p标签');
    //6.子代选择器：标识符 大于号(>)
    $('#list>li').css('background-color','pink');
    //7.后代选择器：标识符 空格符( )
    $("#list li").css('background-color','orange');
    //下面一组用于根据元素的索引进行操作
    //8.获取所有索引值为偶数的元素：标识方式为：even
    $('#text span:even').text('使用even选择器 选中id名为text中 索引为偶数的span标签');
    //9.获取所有索引值为奇数的元素：标识方式为：odd
    $('#text span:odd').text('使用odd选择器 选中id名为text中 索引为奇数的span标签');
    //10.指定索引获取元素：标识方式为：eq(索引) -- eq(索引)是字符串方式 不是函数方法
    $('#text>span:eq(0)').text('使用eq(索引)选择器 选中id名为text中 索引为0的span标签)')
  </script>
</body>
</html> -->

<!-- <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>jQuery第二部分 筛选 选择器</title>
</head>
<body>
  <ul id="list">
    <li class="item">
      <ul>
        <li></li>
        <li></li>
      </ul>
    </li>
    <li></li>
    <li class="item"></li>
  </ul>
  <script src="jquery-1.12.4.min.js"></script>
  <script>
    //筛选选择器与其他选择器的形式不同，筛选选择器都是方法结构
    // - 作用：用于完善jQuery的链式编程操作

    // 1. children() 子代选择器
    //  - 参数：选择器 字符串，参数用于选取满足条件的部分元素
    //  - 如果不传参数，默认选择所有子代元素
    $('#list>li').css('backgroundColor','pink');//演示子代选择器与筛选选择器的用法相同处
    $('#list').css('width',200).children().css('background-color','red');//完善链式编程演示
    $('#list').children('.item').css('height','200px');//children()方法中传参演示

    // 2. find() 后代选择器(选择所有后代 基本上用的少)
    //  - 参数：选择器 字符串, 参数用于选取满足条件的部分元素
    //  - 如果不传参数，操作会被忽略
    $('#list').find('li').css('backgroundColor','orange');
  </script>
</body>
</html> -->

<!-- <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>jQuery第二部分 筛选 选择器</title>
</head>
<body>
  <p class="text">
    <span></span>
  </p>
  <p class="text">
    <span></span>
  </p>
  <p>
    <span id="sp"></span>
  </p>
  <script src="jquery-1.12.4.min.js"></script>
  <script>
    //3. parent() 获取父元素的选择器 类似于webAPI中parentNode属性
    // - 参数：选择器 字符串
    // - 如果不传参数，默认选择所有选中的元素(标签)的父元素
    $('span').parent().css('width',200);
    $('span').parent('.text').css('height',300)
    
    //4. parents() 获取祖先元素(获取所有的父元素 包括爷爷，爷爷的爷爷等)
    // - 参数：选择器 字符串
    // - 如果不传参，默认选择所有(在标签中 包括html body这些父元素),不推荐使用,没有意义
    $('#sp').parents().css('width','200px');
    $('#sp').parents('p').css('background-color','pink').css('height',300);
  </script>
</body>
</html> -->

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>jQuery第二部分 筛选 选择器</title>
</head>
<body>
  <ul>
    <li class="li"></li>
    <li></li>
    <li id="item">这是当前li</li>
    <li class="li"></li>
    <li id="li"></li>
  </ul>
  <script src="jquery-1.12.4.min.js"></script>
  <script>
    // 5. siblings() 获取所有同级元素的选择器
    //  - 参数：选择器 字符串
    //  - 如果不传参数，默认选择所有选中的同级元素(标签)
    $('#item').siblings().text('这些是item的同级元素(标签)');
    $('#item').siblings('.li').text('这些是具有li类名的同级元素(标签)');

    // 6. next() 获取下一个同级元素(只能获取到一个,必须是下一个,即使有类名/id等相同也是下一个)
    //  - 参数：选择器 字符串
    //  - 如果不传参数，默认选择后面的一个同级元素(标签)
    $('#item').next().text('这是item后面的一个同级元素(标签)');
    $('#item').next('.li').css('background-color','pink');

    // 7. prev() 获取上一个同级元素(只能获取到一个,必须是上一个,即使有类名/id等相同也是上一个)
    //  - 参数： 选择器 字符串
    //  - 如果不传参数，默认选择上面的一个同级元素(标签)
    $('#li').prev().css('width',200);
    $('#li').prev('.li').css('height',200);

    // 8. nextAll() 获取后面所有的同级元素
    //  - 参数：选择器 字符串
    //  - 如果不传参数，默认选择所有后面的同级元素
    $('#item').nextAll().text('这些是item后面的所有同级元素(标签)');
    $('#item').nextAll('#li').text('这些是item后面所有id是li的所有同级元素(标签)');

    // 9. prevAll() 获取上面所有的同级元素
    //   - 参数：选择器 字符串
    //   - 如果不传参数，默认选择上面所有的同级元素(标签)
    $('#item').prevAll().text('这些是item上面的所有同级元素(标签)');
    $('#item').prevAll('.li').text('这些是item上面的所有类名li的所有同级元素(标签)');

    // 10. eq() 根据指定索引获取元素 (类似于 :eq()的使用)
    $('li').text('这些都是li标签').eq(1).text('这个是索引为1的 li标签');

    //注意 get()获取到的元素是DOM元素 需要用$()包裹下才能变成jQery对象
    //get()其实是让jQuery对象的元素(标签)转换成DOM对象的元素(标签)
    $($('li').get(1));
    //使用eq()直接获取到jQery对象 省去$()的包裹了
    $('li').eq(1)
  </script>
</body>
</html>